<script setup>
import { ref } from 'vue'
import { putProfile } from '@/api/sys'
import { useStore } from 'vuex'
import Dialog from '../../libs/Dialog/Dialog.vue'
import ChangeAvatar from './change-avatar.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const store = useStore()
const userInfo = ref({ ...store.getters.userInfo })

const submit = async () => {
  const res = await putProfile(userInfo.value)
  store.dispatch('sys/getUserInfo')
  SUCCESSisVisible.value = true
}
// 头像文件选择
const inputFileRef = ref(null)
const onAvatarClick = () => {
  inputFileRef.value.click()
}
const blob = ref('')
const onFileChange = (e) => {
  const file = e.target.files[0]
  if (!file) {
    return
  }
  blob.value = URL.createObjectURL(file)
  isVisible.value = true
}
//对话框
const isVisible = ref(false)
const onChangeUrl = (url) => {
  store.dispatch('sys/getUserInfo')
  isVisible.value = false
}
//移动端退出登录
const onLogout = () => {
  store.dispatch('sys/logout')
  router.push('/')
}
const SUCCESSisVisible = ref(false)
</script>
<template>
  <div class="container md:bg-slate-300 w-screen h-screen md:pt-28">
    <div
      class="content bg-white w-8/12 h-1/2 mx-auto rounded-md pt-10 md:h-auto md:p-4"
    >
      <h2 class="text-center font-bold text-xl">个人资料</h2>

      <!-- 头像 -->
      <div @click="onAvatarClick">
        <span class="font-bold">头像</span>
        <img :src="$store.getters.userInfo?.avatar" class="w-24 h-24 mt-4" />
        <span class="text-slate-500 text-sm">
          支持 jpg、png、jpeg 格式大小 5M 以内的图片
        </span>
      </div>
      <!-- 头像文件选择 -->
      <input
        type="file"
        v-show="false"
        ref="inputFileRef"
        accept=".png, .jpeg, .jpg, .gif"
        @change="onFileChange"
      />
      <!-- 用户名 -->
      <div class="mt-4">
        <span class="font-bold">用户名</span>
        <div class="flex">
          <Input v-model="userInfo.nickname" maxlength="20" class="flex-1" />
          <span>{{ userInfo.nickname.length }} / 20</span>
        </div>
      </div>
      <!-- 职位 -->
      <div class="mt-4">
        <span class="font-bold">职位</span>
        <Input v-model="userInfo.title" />
      </div>
      <!-- 公司 -->

      <div class="mt-4">
        <span class="font-bold">公司</span>
        <Input v-model="userInfo.company" />
      </div>
      <!-- 个人主页 -->
      <div class="mt-4">
        <span class="font-bold">个人主页</span>
        <Input v-model="userInfo.homePage" />
      </div>
      <!-- 个人介绍 -->
      <div class="mt-4">
        <span class="font-bold">个人介绍</span>
        <Input v-model="userInfo.introduction" />
      </div>
      <!-- 保存 -->
      <div class="mt-4">
        <button
          class="bg-blue-500 text-white rounded-md px-4 py-2"
          @click="submit"
        >
          保存
        </button>
      </div>
      <!-- 移动端：退出登录 -->
      <div class="mt-4 md:hidden">
        <button
          class="bg-blue-500 text-white rounded-md px-4 py-2"
          @click="onLogout"
        >
          退出登录
        </button>
      </div>
      <!-- 返回首页 -->
      <div class="mt-4">
        <button
          class="bg-blue-500 text-white rounded-md px-4 py-2"
          @click="router.push('/')"
        >
          返回首页
        </button>
      </div>
    </div>
  </div>
  <Dialog v-model="isVisible">
    <change-avatar :imgBlob="blob" @close="onChangeUrl"></change-avatar>
  </Dialog>
  <Dialog v-model="SUCCESSisVisible">
    <h1 class="text-center">保存成功</h1>
    <Button @click="SUCCESSisVisible = false">确定</Button>
  </Dialog>
</template>

<style lang="scss" scoped></style>
